<template>
	<view class="box">
		<view class="header">
			{{houseName}}
		</view>
		<view class="card_head">
			<view class="column">
				租客姓名: {{data.tenant_name}}
			</view>
			<!-- <view class="">
				<u-tag text="标签" plain size="mini" type="success"></u-tag>
			</view> -->
			<view class="flexBetween">
				<view class="column">
					联系电话:{{data.tenant_phone}}
				</view>
				<view class="tab" v-if="data.overdue_days!=0">
					逾期{{data.overdue_days}}天
				</view>
			</view>
		</view>
		<view class="module">
			<view class="card">
				<view class="title_">
					账单明细
				</view>
				<view class="row">
					<view class="title">
						租金(1个月)
					</view>
					<view class="data">
						{{data.receivable_amount}}
					</view>
				</view>
				<view class="title_">
					账单信息
				</view>
				<view class="row">
					<view class="title">
						约定提前收租日
					</view>
					<view class="data">
						{{data.receivable_date}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						起止日期
					</view>
					<view class="data">
						{{data.bill_period}}
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" :round="10" @close="show = false">
			<view class="popup">
				<view class="cue">
					拨打{{data.tenant_phone}}
				</view>
				<view class="button_box">
					<u-button type="primary" class="sure" @tap="showDetermine">确定</u-button>
					<u-button @click="show = false">取消</u-button>
				</view>
			</view>
		</u-popup>
		<view class="bottom_box">
			<view class="icon" @click="collection">
				<u-icon name="rmb-circle" label="催账" color="#2979ff" size="20"></u-icon>
			</view>
			
			<MButton name="确认收租" colorType="topic" @click="clickButton"></MButton>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getSelectHouseBillDetail,
		getUpdateBillPayStatus
	} from "@/api/my/index.js";
	export default {
		data() {
			return {
				houseName:'',
				data: {},
				show: false,
				phoneNumber: '',
				payStatus:"",
				id: 0
			}
		},
		onLoad(optien) {
			this.selectHouseBillDetail(optien.id)
			this.id = optien.id
		},
		methods: {
			showDetermine() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber
				});
			},
			async selectHouseBillDetail(id) {
				const res = await getSelectHouseBillDetail(id)
				if (res.data.code == 200) {
					this.data = res.data.data[0]
					this.phoneNumber = res.data.data[0].tenant_phone
				
					if(this.data.room_number==''){
						//整租
					   this.houseName=this.data.name+this.data.building_number+'幢/栋'+this.data.unit_number+'单元'+this.data.ventricle_number+'室';
					}else{
						//合租
						this.houseName=this.data.name+this.data.building_number+'幢/栋'+this.data.unit_number+'单元'+this.data.ventricle_number+'室'+this.data.room_number;
					}
				} else {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
				}

			},
			async clickButton() {
				const res = await getUpdateBillPayStatus(this.id)
				if (res.data.code != 200) return this.$refs.uToast.show({
					message: res.data.msg,
					type: 'error'
				})
				this.$refs.uToast.show({
					message: "确认收租成功",
					type: 'success'
				})
				setTimeout(() => {
					 uni.switchTab({
					 	url:'/pages/home/index'
					 })
				}, 1000)
			},
			remark() {
				uni.navigateTo({
					url: '../../../public/lease/remark',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			collection() {
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.box {
		background-color: $pagebgc;
		min-height: 100vh;
		padding: 10rpx;
		max-height: 100%;
		box-sizing: border-box;
		font-size: 32rpx;

		.popup {
			padding: 30rpx;

			.cue {
				font-weight: bold;
				font-size: 40rpx;
				text-align: center;
				padding: 40rpx;
			}

			.button_box {
				@include flexBetween;

				.sure {
					margin-right: 10rpx;
				}
			}

			.button {
				margin-bottom: 20rpx;
			}
		}

		.header {
			text-align: center;
			margin-top: 20rpx;
			background-color: #4d89cb;
			padding: 30rpx;
			color: #fff;
			border-radius: 20rpx 20rpx 0 0;
		}

		.card_head {
			padding: 10rpx 30rpx;
			background-color: #fff;
			border-bottom: #dcdcdc solid 1rpx;

			.tab {
				background-color: #e24e4e;
				color: #fff;
				padding: 5rpx 20rpx;
				font-size: 26rpx;
			}

			.column {
				margin: 20rpx 0;
				width: 70%;
			}

			.flexBetween {
				@include flexBetween;
			}
		}

		.module {
			.title_ {
				font-weight: bold;
			}

			.card {
				padding: 30rpx;
				margin-top: 20rpx;
				background-color: #fff;
			}

			.row {
				@include flexBetween;
				padding: 20rpx 0;
			}

			.title {
				color: $noimportant;
			}

			.data {
				display: flex;
				align-items: center;
			}

			.contract {
				display: flex;
				align-items: center;
				margin: 20rpx 0;
			}
		}

		.bottom_box {
			width: 100%;
			position: fixed;
			box-sizing: border-box;
			bottom: 0;
			left: 0;
			background-color: #fff;
			padding: 20rpx 60rpx;
			@include flexBetween;

			.icon {
				width: 200rpx;
				margin: 0 20rpx;
			}
		}
	}
</style>